<template>
    <div class="form-overview-container">
      <div class="header">
        <h2>表单管理</h2>
        <el-button type="primary" @click="handleCreateForm">新增表单</el-button>
      </div>
  
      <el-table :data="formList" border style="width: 100%">
        <el-table-column prop="form_id" label="表单ID" width="100"></el-table-column>
        <el-table-column prop="time" label="创建时间" width="180">
          <template #default="{row}">
            {{ formatTime(row.time) }}
          </template>
        </el-table-column>
        <el-table-column prop="deadline" label="截止时间" width="180">
          <template #default="{row}">
            {{ row.deadline ? formatTime(row.deadline) : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="表单名称"></el-table-column>
        <el-table-column prop="is_approval" label="需要审批" width="120">
          <template #default="{row}">
            <el-tag :type="row.is_approval ? 'success' : 'info'">
              {{ row.is_approval ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="{row}">
            <el-button size="small" @click="showFormDetail(row)">查看</el-button>
            <el-button size="small" @click="editForm(row)">修改</el-button>
            <el-button size="small" @click="viewSubmissions(row)">查看提交数据</el-button>
            <el-button size="small" @click="viewReport(row)">查看报表</el-button>
            <el-button size="small" @click="downloadData(row)">下载数据</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 查看表单详情弹窗 -->
      <el-dialog v-model="detailVisible" title="表单详情" width="70%">
        <el-table :data="formComponents" border>
          <el-table-column prop="id" label="组件ID" width="100"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="value" label="默认值"></el-table-column>
          <el-table-column prop="order_num" label="排序"></el-table-column>
          <el-table-column prop="is_required" label="必填" width="80">
            <template #default="{row}">
              {{ row.is_required ? '是' : '否' }}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
  
      <!-- 修改表单弹窗 -->
      <el-dialog v-model="editVisible" title="修改表单" width="70%">
        <el-form :model="editFormData" label-width="120px">
          <el-table :data="editFormComponents" border>
            <el-table-column prop="name" label="名称" width="200">
              <template #default="{row}">
                <el-input v-model="row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="150">
              <template #default="{row}">
                <el-select v-model="row.type">
                  <el-option label="输入框" value="input"></el-option>
                  <el-option label="文件上传" value="file"></el-option>
                  <el-option label="复选框" value="checkbox"></el-option>
                  <el-option label="单选框" value="radio"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="默认值">
              <template #default="{row}">
                <el-input v-model="row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="order_num" label="排序" width="100">
              <template #default="{row}">
                <el-input-number v-model="row.order_num" :min="1"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="is_required" label="必填" width="100">
              <template #default="{row}">
                <el-checkbox v-model="row.is_required"></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <template #footer>
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="saveFormChanges">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getFormList, getFormComponents, updateFormComponents } from '@/api/cd/form'
  
  export default {
    data() {
      return {
        formList: [],
        formComponents: [],
        editFormComponents: [],
        detailVisible: false,
        editVisible: false,
        editFormData: {},
        currentFormId: null
      }
    },
    created() {
      this.fetchFormList()
    },
    methods: {
      async fetchFormList() {
        try {
          const res = await getFormList()
          this.formList = res.data
        } catch (error) {
          this.$message.error('获取表单列表失败')
        }
      },
      
      formatTime(time) {
        return new Date(time).toLocaleString()
      },
      
      handleCreateForm() {
        this.$message.info('新增表单功能待实现')
      },
      
      async showFormDetail(row) {
        this.currentFormId = row.form_id
        try {
          const res = await getFormComponents(row.form_id)
          this.formComponents = res.data
          this.detailVisible = true
        } catch (error) {
          this.$message.error('获取表单详情失败')
        }
      },
      
      async editForm(row) {
        this.currentFormId = row.form_id
        try {
          const res = await getFormComponents(row.form_id)
          // 转换二进制字段为布尔值
          this.editFormComponents = res.data.map(item => ({
            ...item,
            is_required: Boolean(item.is_required)
          }))
          this.editVisible = true
        } catch (error) {
          this.$message.error('获取表单详情失败')
        }
      },
      
      async saveFormChanges() {
        try {
          // 转换布尔值为二进制
          const componentsToSave = this.editFormComponents.map(item => ({
            ...item,
            is_required: item.is_required ? 1 : 0
          }))
          
          await updateFormComponents(this.currentFormId, componentsToSave)
          this.$message.success('修改成功')
          this.editVisible = false
        } catch (error) {
          this.$message.error('保存失败')
        }
      },
      
      viewSubmissions(row) {
        this.$router.push(`/cd/form/display/${row.form_id}`)
      },
      
      viewReport() {
        this.$message.info('报表功能待实现')
      },
      
      downloadData(row) {
        // 临时实现，后续替换为实际下载逻辑
        const link = document.createElement('a')
        link.href = `/api/form/export/${row.form_id}`
        link.download = `${row.name}_${row.form_id}.xlsx`
        link.click()
      }
    }
  }
  </script>
  
  <style scoped>
  .form-overview-container {
    padding: 20px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .el-table {
    margin-top: 20px;
  }
  
  .el-button + .el-button {
    margin-left: 8px;
  }
  </style>
  